<template>
  <div id>
    <van-loading type="spinner" color="#1989fa" v-if="showloading" class="load"/>
    <van-search v-model="value" placeholder="请输入搜索关键词" />

    <van-card
      v-for="item in cardlist"
      :key="item.id"
      :price="item.phone"
      :desc="item.address"
      :title="item.name"
      :thumb="item.images[0]"
      @click="togoods(item.id)"
    />
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      value: "",
      cardlist: [],
      showloading :false
    };
  },
  mounted() {
    // console.log(this.$route.query.id);
     this.showloading = true
    this.$axios({
      url: `https://locally.uieee.com/categories/${this.$route.query.id}/shops`,
    }).then((res) => {
      this.cardlist = res.data;
      // console.log(res.data);
      this.showloading = false
    });
  },
  created() {},
  methods: {
    togoods(id) {
      this.$router.push({
        path: "/goods",
        query: { id: id },
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.load{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50% ,-50%);
  z-index: 999;
}
</style>